<!-- 特惠机票推荐-->
<template>
  <div id="planeRecommend">
    <div id="planeRecommendTitle"><span id="orange">特惠</span>机票</div>
    <div id="planeHotCity">
      <label id="planeRecommendLabel">热门城市：</label>
      <el-button @click="planeCitySwitch(item)" class="planeHotCityButton" v-for="item in planeHotCity">{{item}}</el-button>
    </div>
    <el-card id="planeData">
        <div class="planeHotCityRow" v-for="items in planeCityData">
          <div @click="goToResult(planeStartCity,item.arriveCity)" class="planeHotCityCol"
                  v-for="item in items">
            <div class="planeHotCityData">
              <span>{{ planeStartCity }}</span>
              -->
              <span>{{ item.arriveCity }}</span>
            </div>
            <div class="planeHotCityData">{{ item.date }}</div>
            <div class="planeHotCityPrice planeHotCityData">￥{{ item.price }}</div>
          </div>
        </div>
    </el-card>
  </div>

</template>

<script>
import route from "../../router";
import store from "../../store";
export default {
  name: "Recommend",
  data(){
    return{
      planeStartCity:"",
      planeHotCity:[],
      planeCityData:[[]],
    }
  },
  methods:{
    hotCityData(){
      return ["北京","上海","广州","深圳","重庆","成都","杭州","南京"]
    },
    beijing(){
      return [
          [{arriveCity:"湛江",date:"12-04",price:2400}, {arriveCity: "南昌",date:"12-04",price: 1890}, {arriveCity: "杭州",date:"12-04",price: 2020}, {arriveCity: "烟台",date: "12-04",price: 530}, {arriveCity: "深圳",date: "12-04",price: 3650}, {arriveCity: "上海",date: "12-04",price: 530},],
          [{arriveCity:"银川",date:"12-04",price:1870}, {arriveCity: "大连",date:"12-04",price: 1350}, {arriveCity: "宁波",date:"12-04",price: 1820}, {arriveCity: "重庆",date: "12-04",price: 2610}, {arriveCity: "昆明",date: "12-04",price: 2700}, {arriveCity: "南宁",date: "12-04",price: 1700},],
          [ {arriveCity:"西双版纳",date:"12-04",price:2320}, {arriveCity: "海口",date:"12-04",price: 3350}, {arriveCity: "珠海",date:"12-04",price: 1690}, {arriveCity: "兴义",date: "12-04",price: 2340}, {arriveCity: "成都",date: "12-04",price: 2165}, {arriveCity: "贵阳",date: "12-04",price: 2380},]
      ]
    },
    shanghai(){
      return [
        [{arriveCity:"和田",date:"12-04",price:4250}, {arriveCity: "鸡西",date:"12-04",price: 1703}, {arriveCity: "银川",date:"12-04",price: 2380}, {arriveCity: "大庆",date: "12-04",price: 1311}, {arriveCity: "西双版纳",date: "12-04",price: 1119}, {arriveCity: "衡阳",date: "12-04",price:450},],
        [{arriveCity:"青岛",date:"12-04",price:340}, {arriveCity: "腾冲",date:"12-04",price: 2700}, {arriveCity: "烟台",date:"12-04",price: 1345}, {arriveCity: "揭阳",date: "12-04",price: 320}, {arriveCity: "襄阳",date: "12-04",price: 568}, {arriveCity: "延安",date: "12-04",price: 790},],
        [ {arriveCity:"景德镇",date:"12-04",price:300}, {arriveCity: "大理",date:"12-04",price: 2750}, {arriveCity: "长春",date:"12-04",price: 1036}, {arriveCity: "大连",date: "12-04",price: 1360}, {arriveCity: "遵义",date: "12-04",price: 510}, {arriveCity: "包头",date: "12-04",price: 2350},]
      ]
    },
    guangzhou(){
      return [
        [{arriveCity:"合肥",date:"12-04",price:830}, {arriveCity: "襄阳",date:"12-04",price: 1234}, {arriveCity: "石家庄",date:"12-04",price: 23600}, {arriveCity: "达州",date: "12-04",price: 1130}, {arriveCity: "延安",date: "12-04",price: 1460}, {arriveCity: " 忻州",date: "12-04",price:789},],
        [{arriveCity:"哈尔滨",date:"12-04",price:2040}, {arriveCity: "西昌",date:"12-04",price: 1465}, {arriveCity: "榆林",date:"12-04",price: 1010}, {arriveCity: "鸡西",date: "12-04",price: 2640}, {arriveCity: "玉林",date: "12-04",price: 210}, {arriveCity: "齐齐哈尔",date: "12-04",price: 2500},],
        [ {arriveCity:"南宁",date:"12-04",price:880}, {arriveCity: "通辽",date:"12-04",price: 2530}, {arriveCity: "万州",date:"12-04",price: 1350}, {arriveCity: "张家口",date: "12-04",price: 2280}, {arriveCity: "乌海",date: "12-04",price: 1340}, {arriveCity: "库尔勒",date: "12-04",price: 1385},]
      ]
    },
    planeCitySwitch(city){
      if(city=="北京"){
        this.planeStartCity = "北京";
        this.planeCityData = this.beijing();
      }
      if(city=="上海"){
        this.planeStartCity = "上海";
        this.planeCityData = this.shanghai();
      }
      if(city=="广州"){
        this.planeStartCity = "广州";
        this.planeCityData = this.guangzhou();
      }
    },
    goToResult(planeStartCity,arriveCity){
      route.push(`flightSearchResult`);
      store.state.flightSearchInfo.leaveCity = planeStartCity;
      store.state.flightSearchInfo.arriveCity = arriveCity;
      if(new Date().getDate()<10){
        store.state.flightSearchInfo.leaveTime = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-0'+new Date().getDate();
      }else{
        store.state.flightSearchInfo.leaveTime = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+new Date().getDate();
      }
    }
  },
  mounted() {
    this.planeStartCity = "北京";
    this.planeCityData = this.beijing();
    this.planeHotCity = this.hotCityData();
    }
}
</script>

<style scoped>
#planeRecommend{
  margin-left: 150px;
  margin-top: 50px;
  width: 1250px;
  min-height: 500px;
}
#planeRecommendTitle{
  font-family: "仓耳渔阳体 W04", serif;
  font-size: 30px;
  text-align: left;
  width: 1250px;
  height: 50px;
}
#orange{
  color: #f7a300;
}
#planeData{
  display: flex;
  justify-content: center;
  background: #FFFFFF;
  min-width: 1250px;
  min-height: 300px;
}

#planeHotCity{
  text-align: left;
  width: 1250px;
  height: 30px;
}
.planeHotCityButton{
  border: none;
  height: 25px;
}
.planeHotCityRow{
  float: left;
  margin-top:20px;
  width: 396px;
  height: 270px;
  border-right: 1px solid darkgray;
}
.planeHotCityCol{
  padding-left: 10px;
  text-align: left;
  background: #FFFFFF;
  margin-top: 5px;
  width: 380px;
  height: 30px;
  border: none;
  margin-right: 0;
}


.planeHotCityData{
  font-size: 16px;
  float: left;
  align-items: center;
  width: 120px;
  height: 30px;
  display: flex;
  margin-bottom: 10px;
}

.b-curr {
  width: 73px;
  height: 6px;
  background: url(../../assets/toline.png) no-repeat 50%;
}

.planeHotCityData:hover {
  color: #00c77b;
}

.planeHotCityPrice{
  color: #ff6815;
}

</style>